<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table 模块快速使用</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/layuimini/css/public.css" media="all">
</head>
<body>
<script src="/static/layui/layui.js"></script>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 创建用户 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除用户 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="edit">更新</a>

            {% verbatim %}
                {{# if(d.is_active == 1){ }}
                <a class="layui-btn layui-btn-normal layui-btn-sm layui-btn-warm" lay-event="disable">禁用</a>
                {{# } }}
            {% endverbatim %}

            {% verbatim %}
                {{# if(d.is_active == 0){ }}
                <a class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="enable">启用</a>
                {{# } }}
            {% endverbatim %}


            <a class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete">删除</a>
            <a class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="setpassword">设置密码</a>
        </script>

        <script type="text/html" id="UserStatus">
            {% verbatim %}
                {{# if(d.is_active == 1){ }}
                <a class="layui-btn layui-btn-normal layui-btn-sm data-add-btn">启用</a>
                {{# } }}

                {{# if(d.is_active == 0){ }}
                <a class="layui-btn layui-btn-normal layui-btn-sm layui-btn-warm">禁用</a>
                {{# } }}

            {% endverbatim %}
        </script>



        <div id="django-webssh-terminal" class="hide">
            <div id="terminal"></div>
        </div>
    </div>
</div>

<script>
layui.use(['form', 'table','element'], function() {
    var table = layui.table,
        form = layui.form,
        $ = layui.jquery;
    //第一个实例
    table.render({
        elem: '#currentTableId'
        //,height: 312
        , url: '/users/user/api_json/' //数据接口
        , toolbar: '#toolbarDemo'
        , defaultToolbar: ['filter', 'exports', 'print', {
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips'
        }]
        ,cellMinWidth: 50
        ,scrollbar: true
        , page: true //开启分页
        , cols: [[ //表头
            {type: "checkbox",checkbox:true}
            , {field: 'id', title: 'ID',with:"50", align: "center"}
            , {field: 'name', title: '中文名称',align: "center"}
            , {field: 'username', title: '用户名', align: "center"}
            , {field: 'email', title: '邮箱', align: "center"}
            , {field: 'phone', title: '手机号', align: "center"}
            , {field: 'weixin', title: '微信号', align: "center"}
            , {field: 'is_active', title: '激活状态',templet: '#UserStatus', align: "center"}
            , {field: 'classify', title: '操作', toolbar: '#currentTableBar',minWidth:280, align: "center"}
        ]],
        limits: [10, 15, 20, 25, 50, 100],
        limit: 15,
        skin: 'even'
    })

    /**
     * toolbar事件监听
     */
    table.on('toolbar(currentTableFilter)', function (obj) {
        if (obj.event === 'add') {   // 监听添加操作
            $.ajax(
                {
                    url: '/users/user/create/',
                    type: 'get',
                    success: function (data) {
                        //alert(res.os_list);
                        layer.open({
                            title: '添加用户',
                            type: 2, // 1:页面层 2: ifream层
                            shade: 0.2,
                            maxmin: false,
                            shadeClose: true,
                            area: ['90%', '80%'],
                            //offset: [openWH[2] + 'px', openWH[3] + 'px'],
                            content: '/static/layuimini/page/table/add_user.html',
                            //btn:['确认提交'],
                            success : function(layero, index) {

                                var iframe = layero.find('iframe')[0].contentWindow;
                                var body = layer.getChildFrame('body', index);

                                //主机选择
                                //alert(JSON.stringify(data.newservers));
                                iframe.test.method1(data.groups);
                                //解决select无法传值
                                iframe.layui.form.render('select');

                            },
                            //end: function() {//   window.location.reload();//写在这里的话不管是否提交成功都会刷新这个页面
                            //    return false;
                            //},
                            //yes:function (index,layero) {

                            //    var newsForm = layer.getChildFrame('#userForm', index);
                            //    var iframe = layero.find('iframe')[0].contentWindow;
                            //    iframe.CheckForm(newsForm);

                            //    var dataForm = newsForm.serialize();
                            //    dataForm = decodeURIComponent(dataForm,true);//添加的表单数据
                            //    $.ajax({
                            //        url: '/users/user/create/',
                            //        type: 'POST',
                            //        data: dataForm,
                            //        success: function (res) {
                            //            layer.alert(res.msg);
                                        //var index = parent.layer.getFrameIndex(window.name);
                                        //parent.layer.close(index);
                            //            layer.close(index);
                            //        }
                            //    })
                                //});

                            //}
                        });
                }
             });

        } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;

                ///
                layer.confirm('确定要删除吗', {
                    btn: ['确定', '取消'],
                    btn1: function () {
                        $.each(data, function (index, item) {
                            var id = item.id;
                            $.ajax({
                                url: '/users/user/delete/',
                                type: 'POST',
                                data: {"user_id": id},
                                success: function (res) {
                                    //layer.alert(res.msg);
                                    //layer.close(index);
                                    window.location.reload();
                                }
                            })
                        });
                    },
                    btn2: function () {
                        layer.close(layer.index);
                    }
                })


                ///
            }
    });
    // 监听编辑事件
    table.on('tool(currentTableFilter)', function (obj) {
        if (obj.event === 'edit') {   // 监听编辑操作
            var id = obj.data.id;
            $.ajax(
                {
                    url: '/users/user/modify/',
                    type: 'get',
                    data: {"id":id},
                    success: function (data) {
                        layer.open({
                            title: '编辑用户',
                            type: 2, // 1:页面层 2: ifream层
                            shade: 0.2,
                            maxmin: false,
                            shadeClose: true,
                            area: ['90%', '80%'],
                            //offset: [openWH[2] + 'px', openWH[3] + 'px'],
                            content: '/static/layuimini/page/table/edit_user.html',
                            //scrollbar: true,
                            btn:['确认提交'],
                            success : function(layero, index) {
                                form.render();
                                var iframe = layero.find('iframe')[0].contentWindow;
                                //var iframeWin = layero.find('iframe')[0].contentWindow;
                                var body = layer.getChildFrame('body', index);

                                //ID
                                body.find('#id').val(data.id);

                                //中文名
                                body.find('#name').val(data.name);

                                //用户
                                body.find('#username').val(data.username);
                                //alert(data.password);
                                //邮箱
                                //alert(data.email);
                                body.find('#email').val(data.email);

                                ///用户组
                                //alert(data.group_list);
                                iframe.test.method1(data.group_list);

                                ///角色
                                //iframe.test.method3(data.role_list);
                                if (data.is_superuser === false) {
                                        body.find("input[name=is_superuser][value=0]").prop("checked", true);
                                    } else {
                                        body.find("input[name=is_superuser][value=1]").prop("checked", true);
                                }



                                //失效日期
                                //alert(data.lnvalid_date);
                                //body.find('#lnvalid_date').validate(data.lnvalid_date);
                                iframe.test.method5(data.lnvalid_date);

                                //手机
                                body.find('#phone').val(data.phone);

                                //微信
                                body.find('#weixin').val(data.weixin);

                                 //备注
                                //alert(data.info);
                                body.find('#info').val(data.info);

                                //解决select无法传值
                                //iframe.layui.form.render('select');
                                iframe.layui.form.render();
                                //更新表单数据
                                //iframeWin.layui.form.render();

                            },
                            end: function() {
                                window.location.reload();//写在这里的话不管是否提交成功都会刷新这个页面
                                return false;
                            },
                            yes:function (index,layero) {
                                var newsForm = layer.getChildFrame('#userForm', index);
                                var dataForm = newsForm.serialize();
                                dataForm = decodeURIComponent(dataForm,true);//添加的表单数据
                                $.ajax({
                                    url: '/users/user/modify/',
                                    type: 'POST',
                                    data: dataForm,
                                    success: function (res) {
                                        layer.alert(res.msg);
                                        //var index = parent.layer.getFrameIndex(window.name);
                                        //parent.layer.close(index);
                                        layer.close(index);
                                    }
                                })
                                //});

                            }
                        });
                }
             });

        } else if (obj.event === 'delete'){
            var id = obj.data.id;
            layer.confirm('确定要删除吗', {
                btn: ['确定', '取消'],
                btn1: function () {
                    $.ajax(
                        {
                            url: '/users/user/delete/',
                            type: 'POST',
                            data: {"user_id": id},
                            success: function (data) {
                                layer.close(layer.index);
                                window.location.reload();
                            }
                        }
                    )
                },
                btn2: function () {
                    layer.close(layer.index);
                }
            })
        } else if (obj.event === 'disable'){
            var id = obj.data.id;
            layer.confirm('确定要禁用吗', {
                btn: ['确定', '取消'],
                btn1: function () {
                    $.ajax(
                        {
                            url: '/users/user/stop/',
                            type: 'POST',
                            data: {"user_id": id},
                            success: function (data) {
                                layer.close(layer.index);
                                window.location.reload();
                            }
                        }
                    )
                },
                btn2: function () {
                    layer.close(layer.index);
                }
            })
        } else if (obj.event === 'enable'){
            var id = obj.data.id;
            layer.confirm('确定要启用吗', {
                btn: ['确定', '取消'],
                btn1: function () {
                    $.ajax(
                        {
                            url: '/users/user/start/',
                            type: 'POST',
                            data: {"user_id": id},
                            success: function (data) {
                                layer.close(layer.index);
                                window.location.reload();
                            }
                        }
                    )
                },
                btn2: function () {
                    layer.close(layer.index);
                }
            })
        } else if (obj.event === 'setpassword'){
            var id = obj.data.id;
            layer.open({
                title: '修改密码',
                type: 1, // 1:页面层 2: ifream层
                shade: 0.2,
                maxmin: false,
                shadeClose: true,
                area: ['90%', '80%'],
                //offset: [openWH[2] + 'px', openWH[3] + 'px'],
                content: '<form class="layui-form" action="" id="userForm">\n' +
                    '<div class="layui-form-item">\n' +
                    '                <label class="layui-form-label">ID</label>\n' +
                    '                <div class="layui-input-block">\n' +
                    '                    <input id="page_id" type="text" name="page_id"'+ 'value="'+ id + '"lay-verify="required" readOnly="true"  autocomplete="off" class="layui-input layui-disabled">\n' +
                    '                </div>\n' +
                    '                <div id="newpwd1-aux" class="aux-self-word"></div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <label class="layui-form-label">新密码</label>\n' +
                    '                <div class="layui-input-block">\n' +
                    '                    <input id="password_1" type="password" name="title" required  lay-verify="required" placeholder="请输入原密码" autocomplete="off" class="layui-input">\n' +
                    '                </div>\n' +
                    '                <div id="newpwd1-aux" class="aux-self-word"></div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-form-item">\n' +
                    '                <label class="layui-form-label">再次输入</label>\n' +
                    '                <div class="layui-input-block">\n' +
                    '                    <input id="password_2" type="password" name="title" required  lay-verify="required" placeholder="请输入原密码" autocomplete="off" class="layui-input">\n' +
                    '                </div>\n' +
                    '                <div id="newpwd2-aux" class="aux-self-word"></div>\n' +
                    '            </div>\n' +
                    '        </form>\n',
                //scrollbar: true,
                btn:['确认提交'],
                success : function(layero, index) {
                    form.render();
                },
                //end: function() {
                //    window.location.reload();//写在这里的话不管是否提交成功都会刷新这个页面
                //    return false;
                //},
                yes:function (index,layero) {
                    //debugger;
                    var id = $.trim($('#page_id').val());
                    var password_1 = $.trim($('#password_1').val());
                    var password_2 = $.trim($('#password_2').val());
                    dataForm = {"id":id,"password_1":password_1,"password_2":password_2}
                    alert(dataForm);
                    $.ajax({
                        url: '/users/user/set_password/',
                        type: 'POST',
                        data: dataForm,
                        success: function (res) {
                            layer.msg(res.msg,{
                                time:2000
                            })
                            //var index = parent.layer.getFrameIndex(window.name);
                            //parent.layer.close(index);
                            layer.close(index);
                            window.location.reload();
                        }
                    })
                    //});

                }
            });
        }
        ///
    });





});

</script>
</body>
</html>